import React from "react";

/**
 * 组件挂载阶段，要执行的钩子函数
 *
 * 触发页面更新的三个条件
 * 1. 组件状态发生改变：setState({})
 * 2. forceUpdate
 * 3. 组件的 props 当中的属性值发生改变。
 */
class App extends React.Component {
  constructor(props) {
    super(props);
    // 初始化state
    // 为事件处理程序绑定this
    console.log("1. constructor()");
    this.state = {
      count:0
    }
  }

  handleClick = () => {
    // this.forceUpdate()

    this.setState({
      count: this.state.count+1
    })
  }

  render() {
    console.log("2. render");
    // 问题：在组件的更新生命周期阶段，在render函数中可以拿到DOM，但拿到的是更新前的DOM。要注意。
    // console.log(this.state)
    // const button1 = document.getElementById('button-1')
    // console.log('button1', button1)
    // const button2 = document.getElementById('button-1')
    // console.log('button2', button2)
    return (
      <div>
        <button id={'button-'+this.state.count} onClick={this.handleClick}>点击次数{this.state.count}</button>
        <Counter count={this.state.count}/>
      </div>
    );
  }

  componentDidMount() {
    // 发送网络请求
    // DOM操作
    console.log("3. componentDidMount()");
  }

  componentDidUpdate() {
    const button2 = document.getElementById('button-1')
    console.log('button2', button2)
    console.log("4. componentDidUpdate()");
  }

}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    console.log("子组件 1. constructor()");
  }

  render() {
    console.log("子组件 2. render");
    return (
      <div>
        <h3>子组件内容：{this.props.count}</h3>
      </div>
    );
  }

  componentDidMount() {
    console.log("子组件 3. componentDidMount()");
  }

  componentDidUpdate(prevProps) {
    // console.log(prevProps.count)
    // console.log(this.props.count)
    // if(prevProps.count !== this.props.count){
    //   this.setState({})
    // }
    console.log("子组件 4. componentDidUpdate()");
  }

  componentWillUnmount() {
    console.log("子组件 5. componentWillUnmount()");
  }
}

export default App;
